<template>
<div class="allTeam">
  <el-page-header @back="goBack" content="所有队伍" class="allTeam_title">
  </el-page-header>
  <div class="table_box">
    <div class="allTeam_h1">
      <h1>{{gameName}}</h1>
    </div>
    <el-table
        v-loading="loading"
        :data="tableAllData"
        border
        style="margin: 20px auto;"
    >
      <el-table-column
          label="比赛名称"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gameName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="队名"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.groupName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="队长"
          align="center">
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.rname }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          label="指导老师"
          align="center">
        <template slot-scope="scope">
          <div v-for="item in scope.row.teacher" :key="item.id" style="margin-left: 10px">{{ item.teachername }}</div>
        </template>
      </el-table-column>
      <el-table-column
          label="作品名称"
          align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.workName">{{ scope.row.workName }}</el-tag>
<!--          <span>{{ scope.row.workName }}</span>-->
        </template>
      </el-table-column>
      <el-table-column
          label="比赛时间"
          align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.beginTime + '-' + scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          align="center"
          >
        <template slot-scope="scope">
          <el-button
              type="primary"
              size="medium"
              @click="handleAllEdit(scope.$index, scope.row)"> 编辑</el-button>
          <el-button
              type="danger"
              size="medium"
              @click="handleAllcut(scope.$index, scope.row)"> 注销</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="judges_download">
      <el-button icon="el-icon-download" type="success" size="max" @click="handleDown"> 下载表格</el-button>
    </div>
  </div>
</div>
</template>

<script>

export default {
  name: "allTeam",
  data() {
    return{
      gameName: window.sessionStorage.getItem('gameName'),
      tableAllData: [],
      OwnSignup: [], // 先获取自己参加的比赛，没有指导老师和作品信息
      teacher: [], // 通过groupID获取指导老师
      work: {},    // 通过groupID获取作品信息
      groupID: [],
      loading: true
    }
  },
  methods: {
    //生成表格
    async handleDown(){
      const gameID = {gameID: window.sessionStorage.getItem('gameID')};
      const res = await this.$api.downloadGroups(gameID);
      let a = document.createElement('a');
      a.href = res;
      a.click();
    },

    goBack() {
      window.sessionStorage.removeItem('gameID');
      window.sessionStorage.removeItem('gameName');
      window.sessionStorage.removeItem('groupIDList');
      this.$router.push('/backIndex/managementTeam');
    },

    //编辑
    async handleAllEdit(index, row) {
      const teacher = JSON.stringify(row.teacher);
      let team = {};
      team.groupID = row.groupID;
      team.work = row.workName;
      team.groupName = row.groupName;
      window.sessionStorage.setItem("nuofp",row.nuofp);//人数限制
      window.sessionStorage.setItem("team",JSON.stringify(team));
      window.sessionStorage.setItem("groupID",row.groupID);
      window.sessionStorage.setItem("teacher",teacher);
      window.sessionStorage.setItem('gameName',row.gameName);
      this.$router.push('/backIndex/editAllTeam')
    },


    handleAllcut(index,row){
      this.tableAllData[index] === row;
      this.$confirm('此操作将永久删除该队伍, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.tableAllData.splice(index,1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    //  通过groupID获取参赛小组信息
    async getGroup(data){
      const tableAllData = await this.$api.getgroups(data);
      let temp = tableAllData.data.getInfo;
      const teachers = await this.$api.getGroupTeacherInfo(data)
      temp.teacher = teachers.data.getGroupTeacherInfo;
      // this.teacher = teachers.data.getGroupTeacherInfo;
      const nuofpByGameID = window.sessionStorage.getItem('gameID');
      const nuofp = await this.$api.getGamebyId(nuofpByGameID)
      temp.nuofp = nuofp.data.AdminName.leetcode; //人数限制
      const work = await this.$api.getWorkInfo(data);
      temp.workName = work.data.work.title;
        this.work = work.data.work.title;
        this.tableAllData.push(temp);
    },
    //  获取自己参加的比赛
    getOwnSignup() {
      this.loading = true;
      // 现获取以参与的小组信息
      const res = JSON.parse(window.sessionStorage.getItem('groupIDList'));
      const a = typeof res;
      if(a === 'object'){
        this.groupID = res;
      }
      this.groupID.forEach(temp => {
        this.getGroup(temp)
      });
      setTimeout(()=> {
        this.loading = false;
      },3000);
    },
  },
  mounted() {
    this.getOwnSignup();
  }
}
</script>

<style lang="less" scoped>
.allTeam{
  .allTeam_title{
    //margin-top: 100px;
    margin-bottom: 20px;
  }

  .table_box{
    .allTeam_h1{
      text-align: center;
      font-size: 20px;
      font-weight: bolder;
    }
    background-color: #ffff;
    padding: 40px;
    box-shadow: 0 2px 7px rgba(187, 172, 172, 0.49), 0 5px 11px rgba(247, 231, 231, 0.36);
  }
}
</style>
